namespace("sg.canvas");

sg.canvas.AnimatedCanvas = function(width, height, x, y, character) {
    sg.canvas.Canvas.call(this, width, height)
    this.__animationIntervalId = null;
    this.__fps = 30;
    this.listeners = {
    };
    this.collizionFlag = false;

    this.collizionsArr = [];
    this.character = character;
};
sg.canvas.AnimatedCanvas.extends(sg.canvas.Canvas);

sg.canvas.AnimatedCanvas.prototype.addEventListener = function(eventName, clback) {
    if(!this.listeners[eventName]) this.listeners[eventName] = [];
    this.listeners[eventName].push(clback);
};

sg.canvas.AnimatedCanvas.prototype.removeEventListener = function(eventName, clback) {
    if(!this.listeners[eventName]) this.listeners[eventName] = [];
    this.listeners[eventName].splice(this.listeners[eventName].indexOf(clback), 1);
};

sg.canvas.AnimatedCanvas.prototype.onEvent = function(eventName, obj) {
    if(!this.listeners[eventName]) this.listeners[eventName] = [];
    for(var i=0; i<this.listeners[eventName].length; i++) {
        this.listeners[eventName][i](obj);
    }
};

sg.canvas.AnimatedCanvas.prototype.drawFrame = function(image, frame) {
    this.onEvent("tick");
    throw new Error("drawFrame method need override");
};

sg.canvas.AnimatedCanvas.prototype.startAnimation = function() {
    var context = this;
    this.__animationIntervalId = setInterval(function() {
        context.onEvent("before_frame_draw");
        context.collizionFlag = false;
        context.clear(0, 0, mk.constants.CANVAS_WIDTH, mk.constants.CANVAS_HEIGHT)
        context.frameCollizions = {};
        context.drawFrame();
        context.onEvent("after_frame_draw");
    }, 1000/this.__fps);
    return this;
};
sg.canvas.AnimatedCanvas.prototype.stopAnimation = function() {
    if(this.__animationIntervalId!= null) {
        clearInterval(this.__animationIntervalId);
        this.__animationIntervalId = null;
    }
    return this;
};

sg.canvas.AnimatedCanvas.prototype.drawImage = function(image, posX, posY, width, height, imgOffsetX, imgOffsetY, imgWidth, imgHeight ) {
    var context = this;
    if(arguments.length > 5) {
        this.drawOrder.push(function() {this.context2D.drawImage(image.image, posX, posY, width, height, imgOffsetX, imgOffsetY, imgWidth, imgHeight)});
    }
    else {
        this.drawOrder.push(function() {
            this.context2D.drawImage(image.image, posX, posY, width, height)
            context.__checkCollisions(context.collizionsArr, image.id);
        });
    }
    return this;
};

sg.canvas.AnimatedCanvas.prototype.drawObject = function(obj) {
    if(!obj) return this;
    return this.drawImage(obj.img, obj.offsetX, obj.offsetY, obj.width, obj.height);
};

sg.canvas.AnimatedCanvas.prototype.checkCollisions =function(arr) {
    this.collizionsArr = arr;
};


sg.canvas.AnimatedCanvas.prototype.__checkCollisions = function(arr, name) {
    var context = this;
    if(!this.collizionFlag) {
    for(var i=0; i< arr.length; i++) {
        var imgData = this.context2D.getImageData(arr[i].x, arr[i].y, 10, 10);
            for(var j=0; j<imgData.data.length; j++) {
                if(imgData.data[j]!=0) {
                    this.collizionFlag = true;
//                    context.collizions[name] = arr[i].name;
                    arr[i].sender.onCollision();
                    console.log(name, arr[i].key);
                    break;
                }
            }
            if(!this.collizionFlag) {
                arr[i].sender.onNotCollision();
            }
    }
    }
};



sg.canvas.AnimatedCanvas.prototype.destroy = function() {
    this.stopAnimation();
    this.placeholder.removeChild(this.domObject);
};
